<template>
<div>
  <article-item v-for="item in articleList" v-bind:item="item"  v-bind:key="item.id" />
  <div v-if="articleCount === 0" class="flex items-center justify-center pa4 bg-washed-green dark-green">
  <svg class="w1" data-icon="info" viewBox="0 0 32 32" style="fill:currentcolor">
    <title>info icon</title>
    <path d="M16 0 A16 16 0 0 1 16 32 A16 16 0 0 1 16 0 M19 15 L13 15 L13 26 L19 26 z M16 6 A3 3 0 0 0 16 12 A3 3 0 0 0 16 6"></path>
  </svg>
  <span class="lh-title ml3">搜索内容为空</span>
</div>
  <el-pagination
  background
  class="tc"
  layout="prev, pager, next, jumper"
  @current-change="handleCurrentChange"
  :page-size="pageSize"
  :current-page="currentPage"
  :total="articleCount">
</el-pagination>
</div>
</template>

<script>
import { mapState } from 'vuex';
import ArticleItem from './ArticleItem';

export default {
  name: 'ArticleList',
  data() {
    return {
      pageSize: 10,
      currentPage: 1,
    };
  },
  computed: mapState({
    articleList: state => state.social.articleList,
    articleCount: state => state.social.articleCount,
  }),
  methods: {
    handleCurrentChange(page) {
      this.currentPage = page;
    },
    getArticleList({
      currentPage = this.currentPage, pageSize = this.pageSize,
    } = {}) {
      this.$store.dispatch('getArticleList', {
        start: (currentPage - 1) * pageSize,
        limit: pageSize,
        tags: this.$route.query.tags,
        nickname: this.$route.query.nickname,
      });
    },
  },
  watch: {
    currentPage(newPage) {
      this.getArticleList({
        currentPage: newPage,
      });
    },
    $route: 'getArticleList',
  },
  components: {
    ArticleItem,
  },

  beforeMount() {
    this.getArticleList();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.persion-box {
  margin: 20px auto;
}

.text-over {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.pa0 {
  padding: 0;
}
</style>

